<template>
  <div id="tabBar">
    <ul>
      <li v-for="(item,index) in navList" :key="index" @click="flag = index">
        <router-link :to="item.path">
          <img v-if="flag != index" :src="item.imgUrl" :alt="item.name">
          <img v-if="flag == index" :src="item.activeImg" :alt="item.name">
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      navList: [
        // {
        //   name: "首页",
        //   imgUrl: require("../assets/home.png"),
        //   activeImg: require("../assets/home_active.png"),
        //   path: "/home"
        // },
        {
          name: "资产",
          imgUrl: require("../assets/assets.png"),
          activeImg: require("../assets/assets_active.png"),
          path: "/money"
        },
        {
          name: "消息",
          imgUrl: require("../assets/msg.png"),
          activeImg: require("../assets/msg_active.png"),
          path: "/msg"
        },
        {
          name: "我的",
          imgUrl: require("../assets/my.png"),
          activeImg: require("../assets/my_active.png"),
          path: "/my"
        }
      ],
      flag: 0
    };
  },
  watch: {
    $route(to, from) {
      if (to.path) {
        this.flag = this.navList.findIndex(item => item.path == to.path);
      }
    }
  },
  created() {
    if (location.pathname) {
      this.flag = this.navList.findIndex(
        item => item.path == location.pathname
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../common/styl/mixin.styl'
#tabBar
  width 100%
  height rem(49)
  position fixed
  bottom 0
  box-shadow 0 0 10px rgba(0, 0, 0, 0.1)
  background-color #fff
  ul
    display flex
    justify-content space-around
    li
      height rem(49)
      width 100%
      a
        display block
        width 100%
        height 100%
        text-align center
        font-size rem(12)
        color $tabBarCol
        p
          transition all 0.4s
        img
          margin rem(8) 0 rem(2)
          width rem(20)
          height rem(20)
          object-fit contain
</style>
